<script setup lang="ts">
import {onMounted, ref} from "vue";
import articleApi from '@/api/article.ts'
import $bus from '@/utils/emitter.ts'
import { getCurrentInstance } from 'vue';
import {Empty} from "ant-design-vue";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const contentList = ref([])
const { proxy } = getCurrentInstance();
const total = ref(0)
const success = ref(true)
const getArticlePageHandle = async (params:any) => {
  contentList.value = []
  await articleApi.getArticlePage(params).then( (res:any) => {
    contentList.value = res.rows
    total.value = res.total
  })
}
// 发布事件
$bus.on('getArticlePageHandle', async (params:any) => {
  success.value = true
  await getArticlePageHandle(params); // 假设这是事件处理函数
  if (params.callback) {
    params.callback({total:total.value,success:success.value}); // 调用回调函数并返回结果
  }
  setTimeout(() => {
    success.value = false
  },1000)
});
// 点赞
const likeHandle = async (like:{targetId:number,targetType:number},isLike:any) => {
  //添加跳转到详细的路径
  like.url = window.location.href + 'detail?id=' + like.targetId
  like.isLike = isLike
  const result = await articleApi.likeArticle(like)
  if (result.code == 200) {
    contentList.value.forEach(v => {
      if (v.id == like.targetId) {
        v.isLike = !v.isLike
        if (v.isLike) v.likeNum++
        else v.likeNum--
      }
    })
  }
}
// 收藏
const collectHandle = async (collect:{targetId:number,targetType:number},isCollect:any) => {
  //添加跳转到详细的路径
  collect.url = window.location.href + 'detail?id=' + collect.targetId
  collect.isCollect = isCollect
  const result = await articleApi.collectArticle(collect)
  if (result.code == 200) {
    contentList.value.forEach(v => {
      if (v.id == collect.targetId) {
        v.isCollect = !v.isCollect
        if (v.isCollect) v.collectNum++
        else v.collectNum--
      }
    })
  }
}
onMounted(() => {
  // getArticlePageHandle({page:1,pageSize:10})
})
</script>

<template>
  <div class="main-content">
    <a-card
        v-if="contentList.length > 0"
        class="item"
        v-for="(item, index) in contentList"
        :key="index"
        body-style="
        padding: 20px 20px;
        height:100%;
        width:100%;
        display:flex;
">
      <div class="left">
        <div class="title" @click="$router.push({path:'/detail',query:{id:item.id}})">{{item.title}}</div>
        <div class="content">{{proxy.commonUtils.removeMarkdown(item.content)}}</div>
        <div class="bottom">
          <div class="number">
            <EyeOutlined @click="$router.push({path:'/detail',query:{id:item.id}})"/>
            {{item.watchNum}}
          </div>
          <div class="like" @click="likeHandle({targetId:item.id,targetType:1},!item.isLike)">
            <LikeOutlined :class="item.isLike ? 'is-like' : ''"/>
            {{ item.likeNum }}
          </div>
          <div class="message-count">
            <MessageOutlined  @click="$router.push({path:'/detail',query:{id:item.id}})"/>
            {{item.commentNum}}
          </div>
          <div class="collect" @click="collectHandle({targetId:item.id,targetType:1},!item.isCollect)">
            <StarOutlined :class="item.isCollect ? 'is-collect' : ''"/>
            {{item.collectNum}}
          </div>
          <div class="tag">
            <a-tag>{{item.tagName}}</a-tag>
          </div>
          <div class="time" style="text-align: right">{{item.createTime}}</div>
        </div>
      </div>
      <div class="right">
        <img :src="item.coverImg" alt="">
      </div>
    </a-card>
    <a-card
        style="height: 100%"
        body-style="display:flex;align-items: center;justify-content: center;height:100%;"
        v-else>
      <a-spin v-show="success" size="large"/>
      <a-empty
          v-show="!success"
          :image="simpleImage" />
    </a-card>
  </div>
</template>
<style scoped lang="scss">
.main-content{
  //height: 100%;
  height: 630px;
  overflow: scroll;
  .item{
    height: 32.5%;
    margin-bottom: 15px;
    .left{
      flex: 2;
      padding-right: 10px;
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      .title{
        padding-bottom: 5px;
        font-size: 16px;
        font-weight: 600;
        overflow : hidden;
        text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
        display: -webkit-box;
        -webkit-line-clamp:2;//这边的2指的是两行
        -webkit-box-orient: vertical;
        padding-bottom: 5px;
        cursor: pointer;
      }
      .content{
        overflow : hidden;
        text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
        display: -webkit-box;
        -webkit-line-clamp:3;//这边的2指的是两行
        -webkit-box-orient: vertical;
        margin-bottom: 20px;
        color: rgb(75, 85, 99);
      }
      .bottom{
        display: flex;
        gap: 15px;
        color: rgb(116, 128, 149);
        >div{
         display: flex;
          cursor: pointer;
          align-items: center;
          gap: 3px;
        }
        .time{
          display: inline-block;
          flex: 1;
          text-align: right;
        }
        .is-like{
          color: red;
          background-color: red;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent
        }
        .is-collect{
          color: orange;
          background-color: orange;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent
        }
      }
    }
    .right{
      flex: 1;
      img{
        height: 100%;
        width: 100%;
        border-radius: 5px;
      }
    }
  }
}
</style>
